<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现一个盒子水平居中</title>
</head>
<style>
    .box{
        width: 200px;
        height: 200px;
        background: #bf497c;
        box-sizing: border-box;
    }
    .box p{
        width: 50px;
        height: 50px;
        background: #dbc42c;
        margin: 0;
    }
    .box1{
        display: flex;
        justify-content: center;
    }
    .box2 p{
        margin: 0 auto;
    }
    .box3 {
        position: relative;
    }
    .box3 p{
        position: absolute;
        left: 50%;
        margin-left: -25px;
    }
    .box4 {
        position: relative;
    }
    .box4 p{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .box5{
        text-align: center;
    }
    .box5 p{
        display: inline-block;
    }
</style>
<body>
<h3>第一种</h3>
<div class="box1 box">
    <p>盒子</p>
</div>
<h3>第二种</h3>
<div class="box2 box">
    <p>盒子</p>
</div>
<h3>第三种</h3>
<div class="box3 box">
    <p>盒子</p>
</div>
<h3>第四种</h3>
<div class="box4 box">
    <p>盒子</p>
</div>
<h3>第五种</h3>
<div class="box5 box">
    <p>盒子</p>
</div>
</body>
</html>